@extends('homeLayouts.main')
@section('content')
    <link href="/css/home/goods_detail.css" rel="stylesheet" type="text/css"/>
    <div class="main flex flex-direction-col">
        <div class="goods_head flex">
            <div class="list_container flex">
                <div class="goods_album flex flex-direction-col flex-align-items-center flex-jfcontent-center">
                    <div class="tb-booth tb-pic tb-s310">
                        <a href="/images/goods/01.jpg"><img src="/images/goods/01_mid.jpg" alt="美女" rel="/images/goods/01.jpg" class="jqzoom" /></a>
                    </div>
                    <ul class="tb-thumb" id="thumblist">
                        <li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="/images/goods/01_small.jpg" mid="/images/goods/01_mid.jpg" big="/images/goods/01.jpg"></a></div></li>
                        <li><div class="tb-pic tb-s40"><a href="#"><img src="/images/goods/02_small.jpg" mid="/images/goods/02_mid.jpg" big="/images/goods/02.jpg"></a></div></li>
                        <li><div class="tb-pic tb-s40"><a href="#"><img src="/images/goods/03_small.jpg" mid="/images/goods/03_mid.jpg" big="/images/goods/03.jpg"></a></div></li>
                        <li><div class="tb-pic tb-s40"><a href="#"><img src="/images/goods/04_small.jpg" mid="/images/goods/04_mid.jpg" big="/images/goods/04.jpg"></a></div></li>
                        <li><div class="tb-pic tb-s40"><a href="#"><img src="/images/goods/05_small.jpg" mid="/images/goods/05_mid.jpg" big="/images/goods/05.jpg"></a></div></li>

                    </ul>
                </div>
                <div class="goods_right flex flex-direction-col">
                    <div class="goods_info1 flex flex-direction-col flex-jfcontent-center">
                        <p>PH0200|质粒小量提取试剂盒（Plasmid Mini Preparation Kit）</p>
                        <div class="evaluates"><span>☆☆☆☆☆</span><span class="evaluates_num"><span>0</span>个评测</span></div>
                        <div class="line"></div>
                    </div>
                    <div class="goods_info2 flex flex-direction-col flex-jfcontent-center">
                        <div class="flex"><h5>货号：</h5><span>PH1269</span></div>
                        <div class="flex"><h5>名称：</h5><span>质粒小量提取试剂盒（Plasmid Mini Preparation Kit）</span></div>
                        <div class="flex"><h5>规格：</h5><span>100ml</span></div>
                    </div>
                    <div class="goods_info3 flex flex-direction-col flex-jfcontent-center">
                        <div class="line"></div>
                        <h3 class="flex flex-align-items-center">￥120.00</h3>
                        <div class="num_input flex flex-align-items-center">
                            <div class="num_box flex flex-jfcontent-center flex-align-items-center"><span class="minus flex flex-jfcontent-center flex-align-items-center">-</span><span class="goods_number flex flex-jfcontent-center flex-align-items-center">1</span><span class="plus flex flex-jfcontent-center flex-align-items-center">+</span></div>
                            <div class="addToCard flex flex-jfcontent-center flex-align-items-center"><img src="/images/goods/add.png">添加到购物车</div>
                        </div>
                        <div class="line"></div>
                    </div>
                    <div class="goods_info4 flex flex-direction-col">
                        <div class="operate_list flex flex-align-items-center">
                            <span class="flex flex-jfcontent-center flex-align-items-center"><img src="/images/goods/collect.png">添加到收藏</span>
                            <span class="flex flex-jfcontent-center flex-align-items-center"><img src="/images/goods/compare.png">添加并比较</span>
                            <span class="flex flex-jfcontent-center flex-align-items-center"><img src="/images/goods/email.png">给朋友发送邮件</span>
                            <span class="flex flex-jfcontent-center flex-align-items-center"><img src="/images/goods/qrcode.png">QR Code</span>
                        </div>
                        <div class="document">
                            <span>文档说明</span>
                            <p>
                            <a href="http://www.baidu.com">PH0200|质粒小量提取试剂盒（Plasmid Mini Preparation Kit）</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_container flex flex-direction-col">
                <div class="contact_us flex flex-direction-col">
                    <h3 class="flex flex-jfcontent-center flex-align-items-center">联系我们</h3>
                    <p>电话：0595-27971666</p>
                    <p>QQ：355902222</p>
                    <p>邮箱：355902222@qq.com</p>
                    <p>网址：www.lantubio.com</p>
                    <p class="notes">notes:为了方便，您也可以在我们网站右侧点击在线客户直接咨询</p>
                </div>
                <div class="favourable flex flex-direction-col">
                    <h3 class="flex flex-jfcontent-center flex-align-items-center">FAVOURABLE</h3>
                    <img src="/images/goods/favourate.png">
                </div>
            </div>
        </div>
        <div class="goods_detail flex flex-direction-col">
            <div class="detail_head flex">
                <h3 class="current flex flex-jfcontent-center flex-align-items-center">产品描述(Description)</h3>
                <h3 class="flex flex-jfcontent-center flex-align-items-center">咨询记录(共1314条)</h3>
                <h3 class="flex flex-jfcontent-center flex-align-items-center">在线询价</h3>
            </div>
            <div class="detail_container">
                <div class="detail_description current flex flex-direction-col flex-align-items-center">
                    <div class="goods_params flex flex-align-items-center">
                        <div class="detail_items flex flex-jfcontent-center">产品参数</div>
                        <div class="goods_params_content flex flex-direction-col">
                            <span><span>参数一：</span>1111111111</span>
                            <span><span>参数二：</span>2222222</span>
                            <span><span>参数三：</span>333333333333</span>
                            <span><span>参数四：</span>444444444444</span>
                        </div>
                    </div>
                    <div class="goods_describe flex flex-align-items-center">
                        <div class="detail_items flex flex-jfcontent-center">产品参数</div>
                        <div class="goods_describe_content">
                            产品内容描述
                        </div>
                    </div>
                </div>
                <div class="detail_consult flex flex-direction-col unshow">
                    <div class="consult_item flex flex-direction-col">
                        <p>咨询内容咨询内容咨询内容咨询内容</p>
                        <p class="reply"><span>回复:</span>回复内容回复内容</p>
                        <span class="flex flex-jfcontent-end">2017/9/7 14:28</span>
                    </div>
                    <div class="consult_item flex flex-direction-col">
                        <p>咨询内容咨询内容咨询内容咨询内容</p>
                        <p class="reply"><span>回复:</span>回复内容回复内容</p>
                        <span class="flex flex-jfcontent-end">2017/9/7 14:28</span>
                    </div>
                </div>
                <div class="detail_price unshow">
                    <form action="" method="post" class="flex flex-direction-col">
                        <label class="consult_textarea flex flex-align-items-center">咨询内容：
                            <textarea name="content"></textarea>
                        </label>
                        <label class="consult_contact flex flex-align-items-center">联系方式：
                            <input name="contact">
                        </label>
                        <label class="consult_submit flex flex-align-items-center flex-jfcontent-center">
                            提交
                        </label>
                        {{csrf_field()}}
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/js/jquery.imagezoom.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".jqzoom").imagezoom();
            $("#thumblist li a").click(function(){
                //增加点击的li的class:tb-selected，去掉其他的tb-selecte
                $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
                //赋值属性
                $(".jqzoom").attr('src',$(this).find("img").attr("mid"));
                $(".jqzoom").attr('rel',$(this).find("img").attr("big"));
            });
            $(".detail_head h3").click(function(){
                $(this).addClass('current').siblings().removeClass('current');
                $('.detail_container>div:eq('+$(this).index()+')').removeClass('unshow').siblings().addClass('unshow');
            });
            $(".plus").click(function(){
                $(".goods_number").text(parseInt($(".goods_number").text())+1);
            });
            $(".minus").click(function(){
                $(".goods_number").text(parseInt($(".goods_number").text())>1?(parseInt($(".goods_number").text())-1):parseInt($(".goods_number").text()));
            });
        })
    </script>
@stop
